<template>
  <el-dialog
    title="创建角色"
    :visible.sync="dlg"
    width="550px"
    custom-class="dialog-style"
  >
    <el-form
      :model="form"
      label-position="right"
      label-width="80px"
    >
      <el-form-item label="名称">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button v-if="!saving" @click="dlg=false">取 消</el-button>
      <el-button type="primary" :loading="saving" @click="handleCreate">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import { createAccount } from '@/svc/account'

export default {
  name: 'EditRole',
  props: {
    fnEdit: { type: Function, required: true }
  },
  data() {
    return {
      dlg: false,
      saving: false,
      form: {
        id: '',
        name: ''
      }
    }
  },
  methods: {
    show(info) {
      this.form.id = info['id']
      this.form.name = info['name']
      this.dlg = true
    },
    handleCreate() {
      this.saving = true
      this.fnEdit(this, this.form).then(res => {
        this.saving = false
        this.$emit('edit', res)
        this.dlg = false
        this.$success('修改成功')
      }).catch(() => {
        this.saving = false
      })
    }
  }
}
</script>

<style scoped>

</style>
